import { ref } from 'vue'

// 判断当前页面是否显示

/**
 * 当前页面是否在前台
 * @return
 */
export default function usePageVisible() {
  const pageVisible = ref<boolean>(true)
  document.addEventListener('visibilitychange', () => {
    pageVisible.value = !document.hidden
  })
  return pageVisible
}
// 原理:
//  1.给document绑定visibilitychange事件(浏览器标签页被隐藏或显示的时候会触发visibilitychange事件)
//  2.在页面可见时,获取document.hidden(获取当前document是否隐藏的布尔值)属性的取反
//  3.返回该变量即可(true就表示在前台,false表示不在前台)

// 注意: document指的是整个HTML,所以单网页组件在切换路由时收不会触发的(因为浏览器一直是显示的),
//       所以该方法适用是多网页组件,用window.open创建新的页面打开
